<template>
    <div class="talk-info-item-wrapper">
        <p class="title-wrapper">
            <van-icon name="clock-o" color="#E8474D" />
            <span class="title">{{ session.begin }}</span>
        </p>
        <p class="content-wrapper">
            <span class="value left">通话时长 {{ session.duration }}</span>
            <span class="value">客服 {{ session.agentId || "-" }}</span>
        </p>
        <p v-if="showDivider" class="divider"></p>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        session: {
            type: Object,
            default: () => {},
        },
        agentId: {
            type: String,
            default: "",
        },
        showDivider: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {};
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {},
};
</script>

<style lang="less" scoped>
.talk-info-item-wrapper {
    width: 100%;
    height: 73px;
    background: #ffffff;
    padding-top: 14px;
    box-sizing: border-box;

    p {
        margin: 0;
    }
    span {
        display: inline-block;
        vertical-align: middle;
    }

    .divider {
        width: 100%;
        height: 1px;
        background: #e7e7e7;
        margin-top: 13px;
    }
    .title-wrapper {
        .title {
            font-size: 14px;
            font-weight: bold;
            color: #494e4f;
            line-height: 20px;
            margin-left: 13px;
        }
    }
    .content-wrapper {
        margin-top: 6px;
        padding-left: 28px;
        box-sizing: border-box;

        .value {
            font-size: 13px;
            font-weight: 400;
            color: #494e4f;
            line-height: 18px;
        }
        .left {
            width: 40%;
        }
    }
}
</style>
<style lang="less">
.talk-info-item-wrapper {
    .van-icon-clock-o {
        vertical-align: middle;
    }
}
</style>
